<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3531933" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe73e;</span>
                <div class="name">购物车</div>
                <div class="code-name">&amp;#xe73e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe75e;</span>
                <div class="name">我的</div>
                <div class="code-name">&amp;#xe75e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe652;</span>
                <div class="name">首页</div>
                <div class="code-name">&amp;#xe652;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a7;</span>
                <div class="name">分类</div>
                <div class="code-name">&amp;#xe6a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe644;</span>
                <div class="name">appreciate</div>
                <div class="code-name">&amp;#xe644;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe645;</span>
                <div class="name">check</div>
                <div class="code-name">&amp;#xe645;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe646;</span>
                <div class="name">close</div>
                <div class="code-name">&amp;#xe646;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe649;</span>
                <div class="name">edit</div>
                <div class="code-name">&amp;#xe649;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64a;</span>
                <div class="name">emoji</div>
                <div class="code-name">&amp;#xe64a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64b;</span>
                <div class="name">favor_fill</div>
                <div class="code-name">&amp;#xe64b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64c;</span>
                <div class="name">favor</div>
                <div class="code-name">&amp;#xe64c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe64f;</span>
                <div class="name">loading</div>
                <div class="code-name">&amp;#xe64f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe650;</span>
                <div class="name">location_fill</div>
                <div class="code-name">&amp;#xe650;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe651;</span>
                <div class="name">location</div>
                <div class="code-name">&amp;#xe651;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe657;</span>
                <div class="name">round_check</div>
                <div class="code-name">&amp;#xe657;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65c;</span>
                <div class="name">search</div>
                <div class="code-name">&amp;#xe65c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe65f;</span>
                <div class="name">time</div>
                <div class="code-name">&amp;#xe65f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe661;</span>
                <div class="name">unfold</div>
                <div class="code-name">&amp;#xe661;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe665;</span>
                <div class="name">camera</div>
                <div class="code-name">&amp;#xe665;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe666;</span>
                <div class="name">comment_fill</div>
                <div class="code-name">&amp;#xe666;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe667;</span>
                <div class="name">comment</div>
                <div class="code-name">&amp;#xe667;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe668;</span>
                <div class="name">like_fill</div>
                <div class="code-name">&amp;#xe668;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe669;</span>
                <div class="name">like</div>
                <div class="code-name">&amp;#xe669;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">notification</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66c;</span>
                <div class="name">order</div>
                <div class="code-name">&amp;#xe66c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe671;</span>
                <div class="name">deliver</div>
                <div class="code-name">&amp;#xe671;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe672;</span>
                <div class="name">evaluate</div>
                <div class="code-name">&amp;#xe672;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">pay</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe675;</span>
                <div class="name">send</div>
                <div class="code-name">&amp;#xe675;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe676;</span>
                <div class="name">shop</div>
                <div class="code-name">&amp;#xe676;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe677;</span>
                <div class="name">ticket</div>
                <div class="code-name">&amp;#xe677;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe678;</span>
                <div class="name">wang</div>
                <div class="code-name">&amp;#xe678;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe679;</span>
                <div class="name">back</div>
                <div class="code-name">&amp;#xe679;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe67c;</span>
                <div class="name">cascades</div>
                <div class="code-name">&amp;#xe67c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe684;</span>
                <div class="name">more</div>
                <div class="code-name">&amp;#xe684;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe689;</span>
                <div class="name">scan</div>
                <div class="code-name">&amp;#xe689;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe68a;</span>
                <div class="name">settings</div>
                <div class="code-name">&amp;#xe68a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe69b;</span>
                <div class="name">pic</div>
                <div class="code-name">&amp;#xe69b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a3;</span>
                <div class="name">right</div>
                <div class="code-name">&amp;#xe6a3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a4;</span>
                <div class="name">refresh</div>
                <div class="code-name">&amp;#xe6a4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6a5;</span>
                <div class="name">more_android</div>
                <div class="code-name">&amp;#xe6a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6b7;</span>
                <div class="name">profile</div>
                <div class="code-name">&amp;#xe6b7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6c0;</span>
                <div class="name">lock</div>
                <div class="code-name">&amp;#xe6c0;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6d4;</span>
                <div class="name">square_check_fill</div>
                <div class="code-name">&amp;#xe6d4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6da;</span>
                <div class="name">add</div>
                <div class="code-name">&amp;#xe6da;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6de;</span>
                <div class="name">fold</div>
                <div class="code-name">&amp;#xe6de;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e3;</span>
                <div class="name">appreciate_fill</div>
                <div class="code-name">&amp;#xe6e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e8;</span>
                <div class="name">tao</div>
                <div class="code-name">&amp;#xe6e8;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6e9;</span>
                <div class="name">mobile_tao</div>
                <div class="code-name">&amp;#xe6e9;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe703;</span>
                <div class="name">down</div>
                <div class="code-name">&amp;#xe703;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe720;</span>
                <div class="name">pull_right</div>
                <div class="code-name">&amp;#xe720;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe72d;</span>
                <div class="name">refresh_arrow</div>
                <div class="code-name">&amp;#xe72d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73c;</span>
                <div class="name">attention_fill</div>
                <div class="code-name">&amp;#xe73c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe73d;</span>
                <div class="name">attention</div>
                <div class="code-name">&amp;#xe73d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e3;</span>
                <div class="name">more_android_light</div>
                <div class="code-name">&amp;#xe7e3;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e4;</span>
                <div class="name">more_light</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e8;</span>
                <div class="name">search_list_light</div>
                <div class="code-name">&amp;#xe7e8;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1658489340573') format('woff'),
       url('iconfont.ttf?t=1658489340573') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-gouwuche"></span>
            <div class="name">
              购物车
            </div>
            <div class="code-name">.icon-gouwuche
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wode"></span>
            <div class="name">
              我的
            </div>
            <div class="code-name">.icon-wode
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shouye"></span>
            <div class="name">
              首页
            </div>
            <div class="code-name">.icon-shouye
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fenlei"></span>
            <div class="name">
              分类
            </div>
            <div class="code-name">.icon-fenlei
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-appreciate"></span>
            <div class="name">
              appreciate
            </div>
            <div class="code-name">.icon-appreciate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-check"></span>
            <div class="name">
              check
            </div>
            <div class="code-name">.icon-check
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              close
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-edit"></span>
            <div class="name">
              edit
            </div>
            <div class="code-name">.icon-edit
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-emoji"></span>
            <div class="name">
              emoji
            </div>
            <div class="code-name">.icon-emoji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favorfill"></span>
            <div class="name">
              favor_fill
            </div>
            <div class="code-name">.icon-favorfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-favor"></span>
            <div class="name">
              favor
            </div>
            <div class="code-name">.icon-favor
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-loading"></span>
            <div class="name">
              loading
            </div>
            <div class="code-name">.icon-loading
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-locationfill"></span>
            <div class="name">
              location_fill
            </div>
            <div class="code-name">.icon-locationfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-location"></span>
            <div class="name">
              location
            </div>
            <div class="code-name">.icon-location
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-roundcheck"></span>
            <div class="name">
              round_check
            </div>
            <div class="code-name">.icon-roundcheck
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search"></span>
            <div class="name">
              search
            </div>
            <div class="code-name">.icon-search
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-time"></span>
            <div class="name">
              time
            </div>
            <div class="code-name">.icon-time
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-unfold"></span>
            <div class="name">
              unfold
            </div>
            <div class="code-name">.icon-unfold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-camera"></span>
            <div class="name">
              camera
            </div>
            <div class="code-name">.icon-camera
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-commentfill"></span>
            <div class="name">
              comment_fill
            </div>
            <div class="code-name">.icon-commentfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-comment"></span>
            <div class="name">
              comment
            </div>
            <div class="code-name">.icon-comment
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-likefill"></span>
            <div class="name">
              like_fill
            </div>
            <div class="code-name">.icon-likefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-like"></span>
            <div class="name">
              like
            </div>
            <div class="code-name">.icon-like
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-notification"></span>
            <div class="name">
              notification
            </div>
            <div class="code-name">.icon-notification
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-order"></span>
            <div class="name">
              order
            </div>
            <div class="code-name">.icon-order
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-deliver"></span>
            <div class="name">
              deliver
            </div>
            <div class="code-name">.icon-deliver
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-evaluate"></span>
            <div class="name">
              evaluate
            </div>
            <div class="code-name">.icon-evaluate
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pay"></span>
            <div class="name">
              pay
            </div>
            <div class="code-name">.icon-pay
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-send"></span>
            <div class="name">
              send
            </div>
            <div class="code-name">.icon-send
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shop"></span>
            <div class="name">
              shop
            </div>
            <div class="code-name">.icon-shop
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-ticket"></span>
            <div class="name">
              ticket
            </div>
            <div class="code-name">.icon-ticket
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-wang"></span>
            <div class="name">
              wang
            </div>
            <div class="code-name">.icon-wang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-back"></span>
            <div class="name">
              back
            </div>
            <div class="code-name">.icon-back
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-cascades"></span>
            <div class="name">
              cascades
            </div>
            <div class="code-name">.icon-cascades
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more"></span>
            <div class="name">
              more
            </div>
            <div class="code-name">.icon-more
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-scan"></span>
            <div class="name">
              scan
            </div>
            <div class="code-name">.icon-scan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-settings"></span>
            <div class="name">
              settings
            </div>
            <div class="code-name">.icon-settings
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pic"></span>
            <div class="name">
              pic
            </div>
            <div class="code-name">.icon-pic
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-right"></span>
            <div class="name">
              right
            </div>
            <div class="code-name">.icon-right
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresh"></span>
            <div class="name">
              refresh
            </div>
            <div class="code-name">.icon-refresh
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-moreandroid"></span>
            <div class="name">
              more_android
            </div>
            <div class="code-name">.icon-moreandroid
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-profile"></span>
            <div class="name">
              profile
            </div>
            <div class="code-name">.icon-profile
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-lock"></span>
            <div class="name">
              lock
            </div>
            <div class="code-name">.icon-lock
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-squarecheckfill"></span>
            <div class="name">
              square_check_fill
            </div>
            <div class="code-name">.icon-squarecheckfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-add"></span>
            <div class="name">
              add
            </div>
            <div class="code-name">.icon-add
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fold"></span>
            <div class="name">
              fold
            </div>
            <div class="code-name">.icon-fold
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-appreciatefill"></span>
            <div class="name">
              appreciate_fill
            </div>
            <div class="code-name">.icon-appreciatefill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tao"></span>
            <div class="name">
              tao
            </div>
            <div class="code-name">.icon-tao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mobiletao"></span>
            <div class="name">
              mobile_tao
            </div>
            <div class="code-name">.icon-mobiletao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-down"></span>
            <div class="name">
              down
            </div>
            <div class="code-name">.icon-down
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-pullright"></span>
            <div class="name">
              pull_right
            </div>
            <div class="code-name">.icon-pullright
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-refresharrow"></span>
            <div class="name">
              refresh_arrow
            </div>
            <div class="code-name">.icon-refresharrow
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-attentionfill"></span>
            <div class="name">
              attention_fill
            </div>
            <div class="code-name">.icon-attentionfill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-attention"></span>
            <div class="name">
              attention
            </div>
            <div class="code-name">.icon-attention
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more_android_light"></span>
            <div class="name">
              more_android_light
            </div>
            <div class="code-name">.icon-more_android_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-more_light"></span>
            <div class="name">
              more_light
            </div>
            <div class="code-name">.icon-more_light
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-search_list_light"></span>
            <div class="name">
              search_list_light
            </div>
            <div class="code-name">.icon-search_list_light
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-gouwuche"></use>
                </svg>
                <div class="name">购物车</div>
                <div class="code-name">#icon-gouwuche</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wode"></use>
                </svg>
                <div class="name">我的</div>
                <div class="code-name">#icon-wode</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shouye"></use>
                </svg>
                <div class="name">首页</div>
                <div class="code-name">#icon-shouye</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fenlei"></use>
                </svg>
                <div class="name">分类</div>
                <div class="code-name">#icon-fenlei</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-appreciate"></use>
                </svg>
                <div class="name">appreciate</div>
                <div class="code-name">#icon-appreciate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-check"></use>
                </svg>
                <div class="name">check</div>
                <div class="code-name">#icon-check</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">close</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-edit"></use>
                </svg>
                <div class="name">edit</div>
                <div class="code-name">#icon-edit</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-emoji"></use>
                </svg>
                <div class="name">emoji</div>
                <div class="code-name">#icon-emoji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favorfill"></use>
                </svg>
                <div class="name">favor_fill</div>
                <div class="code-name">#icon-favorfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-favor"></use>
                </svg>
                <div class="name">favor</div>
                <div class="code-name">#icon-favor</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-loading"></use>
                </svg>
                <div class="name">loading</div>
                <div class="code-name">#icon-loading</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-locationfill"></use>
                </svg>
                <div class="name">location_fill</div>
                <div class="code-name">#icon-locationfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-location"></use>
                </svg>
                <div class="name">location</div>
                <div class="code-name">#icon-location</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-roundcheck"></use>
                </svg>
                <div class="name">round_check</div>
                <div class="code-name">#icon-roundcheck</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search"></use>
                </svg>
                <div class="name">search</div>
                <div class="code-name">#icon-search</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-time"></use>
                </svg>
                <div class="name">time</div>
                <div class="code-name">#icon-time</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-unfold"></use>
                </svg>
                <div class="name">unfold</div>
                <div class="code-name">#icon-unfold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-camera"></use>
                </svg>
                <div class="name">camera</div>
                <div class="code-name">#icon-camera</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-commentfill"></use>
                </svg>
                <div class="name">comment_fill</div>
                <div class="code-name">#icon-commentfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-comment"></use>
                </svg>
                <div class="name">comment</div>
                <div class="code-name">#icon-comment</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-likefill"></use>
                </svg>
                <div class="name">like_fill</div>
                <div class="code-name">#icon-likefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-like"></use>
                </svg>
                <div class="name">like</div>
                <div class="code-name">#icon-like</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-notification"></use>
                </svg>
                <div class="name">notification</div>
                <div class="code-name">#icon-notification</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-order"></use>
                </svg>
                <div class="name">order</div>
                <div class="code-name">#icon-order</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-deliver"></use>
                </svg>
                <div class="name">deliver</div>
                <div class="code-name">#icon-deliver</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-evaluate"></use>
                </svg>
                <div class="name">evaluate</div>
                <div class="code-name">#icon-evaluate</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pay"></use>
                </svg>
                <div class="name">pay</div>
                <div class="code-name">#icon-pay</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-send"></use>
                </svg>
                <div class="name">send</div>
                <div class="code-name">#icon-send</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shop"></use>
                </svg>
                <div class="name">shop</div>
                <div class="code-name">#icon-shop</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-ticket"></use>
                </svg>
                <div class="name">ticket</div>
                <div class="code-name">#icon-ticket</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-wang"></use>
                </svg>
                <div class="name">wang</div>
                <div class="code-name">#icon-wang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-back"></use>
                </svg>
                <div class="name">back</div>
                <div class="code-name">#icon-back</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-cascades"></use>
                </svg>
                <div class="name">cascades</div>
                <div class="code-name">#icon-cascades</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more"></use>
                </svg>
                <div class="name">more</div>
                <div class="code-name">#icon-more</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-scan"></use>
                </svg>
                <div class="name">scan</div>
                <div class="code-name">#icon-scan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-settings"></use>
                </svg>
                <div class="name">settings</div>
                <div class="code-name">#icon-settings</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pic"></use>
                </svg>
                <div class="name">pic</div>
                <div class="code-name">#icon-pic</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-right"></use>
                </svg>
                <div class="name">right</div>
                <div class="code-name">#icon-right</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresh"></use>
                </svg>
                <div class="name">refresh</div>
                <div class="code-name">#icon-refresh</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-moreandroid"></use>
                </svg>
                <div class="name">more_android</div>
                <div class="code-name">#icon-moreandroid</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-profile"></use>
                </svg>
                <div class="name">profile</div>
                <div class="code-name">#icon-profile</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-lock"></use>
                </svg>
                <div class="name">lock</div>
                <div class="code-name">#icon-lock</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-squarecheckfill"></use>
                </svg>
                <div class="name">square_check_fill</div>
                <div class="code-name">#icon-squarecheckfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-add"></use>
                </svg>
                <div class="name">add</div>
                <div class="code-name">#icon-add</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fold"></use>
                </svg>
                <div class="name">fold</div>
                <div class="code-name">#icon-fold</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-appreciatefill"></use>
                </svg>
                <div class="name">appreciate_fill</div>
                <div class="code-name">#icon-appreciatefill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tao"></use>
                </svg>
                <div class="name">tao</div>
                <div class="code-name">#icon-tao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mobiletao"></use>
                </svg>
                <div class="name">mobile_tao</div>
                <div class="code-name">#icon-mobiletao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-down"></use>
                </svg>
                <div class="name">down</div>
                <div class="code-name">#icon-down</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-pullright"></use>
                </svg>
                <div class="name">pull_right</div>
                <div class="code-name">#icon-pullright</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-refresharrow"></use>
                </svg>
                <div class="name">refresh_arrow</div>
                <div class="code-name">#icon-refresharrow</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attentionfill"></use>
                </svg>
                <div class="name">attention_fill</div>
                <div class="code-name">#icon-attentionfill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-attention"></use>
                </svg>
                <div class="name">attention</div>
                <div class="code-name">#icon-attention</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more_android_light"></use>
                </svg>
                <div class="name">more_android_light</div>
                <div class="code-name">#icon-more_android_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-more_light"></use>
                </svg>
                <div class="name">more_light</div>
                <div class="code-name">#icon-more_light</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-search_list_light"></use>
                </svg>
                <div class="name">search_list_light</div>
                <div class="code-name">#icon-search_list_light</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
